import React from 'react'
import style from './Center.module.css'
import { RightOutlined } from '@ant-design/icons';
import { Popover } from 'antd';
function Center() {
  const bianji = [
    { title: "智能抠图", },
    { title: "AI去水印", },
    { title: "图片变清晰", },
    { title: "图片批处理", },
    { title: "智能消除", },
    { title: "智能改图", },
    { title: "智能外拓", },
    { title: "图片编辑", },
    { title: "图片翻译", },
    { title: "无损改尺寸", },
    { title: "批量设计", },
  ]
  const AIchuangzuo: any = [
    { title: 'Ai拼图' },
    { title: '智能设计' },
    { title: '一句话设计' },
    { title: 'AI商品图' },
    { title: 'AI文案' },
    { title: 'AI温升图' },
    { title: '文生素材' },
    { title: 'AI土生土' },
    { title: '文生背景' },
    { title: '文生绘本' },
    { title: '文生人物' },
    { title: '线稿上色' },
    { title: '姿势识别' },
    { title: 'AI照改漫' },
  ]
  const content1 = (
    <div>
      <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/4a2d3f82-c500-4b43-bab2-fbace1ca9b44_thumb?v=1726358881818&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" style={{ width: "200px" }} />
    </div>
  );
  const content2 = (
    <div>
      <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/c7fcd4b5-c8d0-4440-aa24-6bafb2d29cd3_thumb?v=1726358881818&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt=""  style={{ width: "200px" }} />
    </div>
  );
  const content3 = (
    <div>
      <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/6119b746-8cdc-4878-9318-978e0146b987_thumb?v=1726358881818&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" style={{ width: "200px" }} />
    </div>
  );
  return (
    <div className={style.CenterBox}>
      <div className={style.CenterLeft}>
        <h3>创建设计</h3>
        <div className={style.KaiShi}>
          <div style={{ border: "1px solid #FFF", width: "90%", margin: "7px auto", borderRadius: "10px" }}>
            <p>+</p>
            <p>开始设计</p>
          </div>
          <div className={style.imgs}>
            <span>
              <Popover content={content1} placement="bottom">
                <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/4a2d3f82-c500-4b43-bab2-fbace1ca9b44_thumb?v=1726358881818&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </Popover>
            </span>
            <span>
              <Popover content={content2} placement="bottom">
                <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/c7fcd4b5-c8d0-4440-aa24-6bafb2d29cd3_thumb?v=1726358881818&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </Popover>
            </span>
            <span>
              <Popover content={content3} placement="bottom">
                <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/6119b746-8cdc-4878-9318-978e0146b987_thumb?v=1726358881818&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
              </Popover>
            </span>
            <span className={style.jian}>
              <img src="/src/assets/images/jiantou.png" alt="" />
            </span>
          </div>
        </div>
      </div>
      <div className={style.CenterCenter}>
        <h3>图片编辑</h3>
        <div className={style.xiao}>
          {
            bianji.map((item, index) => (
              <p key={index}>{item.title}</p>
            ))
          }
        </div>
      </div>
      <div className={style.CenterBottom}>
        <h3>AI创作</h3>
        <div className={style.xiao}>
          {
            AIchuangzuo.map((item, index) => (
              <p key={index}>{item.title}</p>
            ))
          }
        </div>
      </div>
    </div>
  )
}

export default Center
